<template>
    <van-nav-bar title="类目分类" left-text="返回" left-arrow @click-left="onClickLeft" />
    <van-tree-select 
      v-model:active-id="rightactiveId"
      v-model:main-active-index="leftactiveIndex" 
     :items="categoryData">

        <template #content>
            <van-grid :column-num="3" icon-size="70px">
                <van-grid-item v-for="item in categoryData[leftactiveIndex].children" :key="item.id" 
                 :icon="item.img" 
                 :text="item.text"
                 :to="{ name:'moveProductList',query:{categoryId: item.id}}" />
            </van-grid>

        </template>

    </van-tree-select>

</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import { ref } from 'vue';
import { CategoryApi } from '@/api'

const onClickLeft = () => history.back();

//右侧选中的id
const rightactiveId = ref(1);
//左侧选中的index
const leftactiveIndex = ref(0);
const categoryData =ref([
    {
        text: '浙江',
        children: [
            { text: '杭州', id: 1, img:'https://m.360buyimg.com/babel/jfs/t1/113605/35/30715/9589/6386f8fdE96e0a1a5/0ec1901933d934d3.png' },
            { text: '温州', id: 2, img:'https://m.360buyimg.com/babel/jfs/t1/113605/35/30715/9589/6386f8fdE96e0a1a5/0ec1901933d934d3.png'},
            { text: '宁波', id: 3, img: 'https://m.360buyimg.com/babel/jfs/t1/113605/35/30715/9589/6386f8fdE96e0a1a5/0ec1901933d934d3.png' },
        ],
    },
])
const categoryData2 = ref([
    { id: 1, name: "手机数码", img: "", parentId: 0 },
    { id: 2, name: "手机数码", img: "", parentId: 1 },
    { id: 3, name: "手机数码", img: "", parentId: 1 },
    { id: 4, name: "家用电器", img: "", parentId: 0 },
    { id: 5, name: "电饭煲", img: "", parentId: 4 },
    { id: 6, name: "微波炉", img: "", parentId: 4 },
])
onMounted(() => {
    callCategoryApi()
    //  categoryData2.value.forEach((item: any) => {
    //     item.text = item.name
    // });
    // // console.log(categoryData2);
    // //使用高阶函数
    // let categoryData3 = categoryData2.value.reduce((newArray: any, currValue: any) => {
    //     currValue.children = categoryData2.value.filter(
    //         item => { return item.parentId === currValue.id })
    //     if (currValue.parentId === 0) {
    //         newArray.push(currValue)
    //     }
    //     return newArray
    // }, [])
    // console.log(categoryData3);
    // //上面categoryData 里面的数据清空
	// categoryData.value = categoryData3
})

const callCategoryApi = () => { 
    CategoryApi.select.call().then((res: any) => {
       res.forEach((item: any) => {
            item.text = item.name
        });
        // console.log(categoryData2);
        //使用高阶函数
        let categoryData3 = res.reduce((newArray: any, currValue: any) => {
            currValue.children = res.filter(
                (item:any) => { return item.parentId === currValue.id })
            if (currValue.parentId === 0) {
                newArray.push(currValue)
            }
            return newArray
        }, [])
        console.log(categoryData3);
        //上面categoryData 里面的数据清空
        categoryData.value = categoryData3
    })
}


</script>

<style scoped>

</style>